<template>
    <div>
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item class="nav-item" :to="{ path: '/main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item class="nav-item" >用户管理</el-breadcrumb-item>
            <el-breadcrumb-item class="nav-item" >用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="content">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-input class="ipt" placeholder="请输入内容">
                        <template #append>
                            <el-button :icon="Search"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="show = true">添加用户</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column align="left" label="#" width="180">
                    <template #default="scope">{{scope.$index + 1}}</template>
                </el-table-column>
                <el-table-column prop="username" label="姓名" width="180" />
                <el-table-column prop="email" label="邮箱" />
                <el-table-column prop="mobile" label="电话" width="180" />
                <el-table-column prop="role_name" label="角色" width="180" />
                <el-table-column prop="mg_state" label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.mg_state"/>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" :icon="Edit"></el-button>
                        <el-button type="warning" :icon="Star"></el-button>
                        <el-button type="danger" :icon="Delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination layout="total, sizes, prev, pager, next, jumper, slot" 
            :total="total" 
            :page-sizes="[5, 10, 20, 50]"
            @size-change="sizeChange"
            @current-change="pageChange">
            </el-pagination>
        </div>
        <el-dialog v-model="show" title="添加用户">
            <el-form class="demo-form-inline" label-width="80px" :model="formData" :rules="rules">
                <el-form-item label="用户名" prop="username">
                    <el-input class="ipt" v-model="formData.username"></el-input>
                </el-form-item>
                 <el-form-item label="密码" prop="password">
                    <el-input class="ipt" v-model="formData.password"></el-input>
                </el-form-item>
                 <el-form-item label="邮箱">
                    <el-input class="ipt" v-model="formData.email"></el-input>
                </el-form-item>
                 <el-form-item label="电话">
                    <el-input class="ipt" v-model="formData.mobile"></el-input>
                </el-form-item>
                <el-form-item class="submit">
                    <el-button type="default">取消</el-button>
                    <el-button type="primary" @click="addUserEv">添加用户</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script setup>
import { ArrowRight, Search, Edit, Star, Delete } from '@element-plus/icons'
import { ref, computed, reactive } from 'vue'
import { getUserList, addUser} from '@/api'
let tableData = ref([]) 
let obj = {pagenum:1, pagesize: 10}
// let pagenum = ref(1)
let show = ref(false)
let total = ref(0)
// 添加用户的表单数据
let formData = reactive({
    username: '',
    password: '',
    email: '',
    mobile: ''
}) 
let rules = reactive({
    username: [
        {
            required: true,
            message: "用户名不能为空",
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: "用户密码不能为空",
            trigger: 'blur' 
        }
    ]
})
// let {users} = await getUserList(obj)
getUserList(obj).then(res => {
    // console.log(res);
    tableData.value = res.users
    total.value = res.total
})
async function sizeChange(val) {
    // console.log(val);
    obj.pagesize = val
    let { users} = await getUserList(obj)
    tableData.value = res.users
}
function pageChange(val) {
    obj.pagenum = val
    getUserList(obj).then(res => {
        tableData.value = res.users
    })
}
// 添加用户的逻辑
function addUserEv() {
    addUser(formData).then(async (res) => {
        let { users, total} = await getUserList(obj)
        tableData.value = res.users
        total.value = total
    })

}
</script>
<style lang="scss" scoped>
.nav-item {
    font-size: 12px;
}
.content {
    margin-top: 20px;
    .ipt {
        width: 500px;
    }
}
.submit {
    text-align: right;
}
.block {
margin-top: 20px}
</style>

